<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#webgl {
				border: 1px solid blueviolet;
			}
		</style>
	</head>
	<body>
		<canvas id="webgl">
			浏览器版本
		</canvas>
	</body>
	<script>
		let canvas = document.getElementById("webgl")
		canvas.width = 500;
		canvas.height = 500;
		let gl = canvas.getContext('webgl')
		
		// vertexShader, fragmentShader
		let vertexSource = `
		void main() {
			gl_Position = vec4(0.0,0.5,0.0,1);
			gl_PointSize = 10.0;
		}`; 
		let fragmentSource = `
		void main() {
			gl_FragColor = vec4(1.0,0.0,0.0,1);
		}`;
		function createShader(gl, type , source) {
			let shader = gl.createShader(type)
			gl.shaderSource(shader, source)
			gl.compileShader(shader)
			return shader
		}
		let vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexSource)
		let fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentSource)
 
		function createProgram() {
			
		}
		// program
		let program = gl.createProgram()
		gl.attachShader(program,fragmentShader)
		gl.attachShader(program,vertexShader)
		gl.linkProgram(program)
		gl.useProgram(program)
		// 清空画布
		gl.clearColor(0,0,0,1.0)
		gl.clear(gl.COLOR_BUFFER_BIT)
		// 画个点
		gl.drawArrays(gl.POINTS,0,1)
	</script>
</html>